<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="./style.css">
  <title>Doraemon</title>
  <script src="//at.alicdn.com/t/font_2016901_5jzvhufez4.js"></script>
  <style type="text/css">
    .icon {
      width: 1.2em; height: 1.2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
  </style>
</head>
<body>
  <style id="codeStyle"></style>
  <div id="codeContent-wrapper">
    <div id="codeContent"></div>
  </div>
  <div class="buttons">
    <button id="btnPlay">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" viewBox="0 0 100 100">
        <use xlink:href="#icon-bofang"></use>
      </svg>
    </button>
    <button id="btnPause">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
        <use xlink:href="#icon-zantingtingzhi"></use>
      </svg>
    </button>
    <button id="btnNormalSpeed">
      <span>1倍速</span>
    </button>
    <button id="btnQuadraSpeed">
      <span>4倍速</span>
    </button>
    <button id="btnHexaSpeed">
      <span>16倍速</span>
    </button>
    <button id="btnSkip">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
        <use xlink:href="#icon-tiaoguo"></use>
      </svg>
    </button>
  </div>
  <div class="figure">
      <div class="hopter">
        <div class="plate"></div>
        <div class="rect"></div>
        <div class="semi-circle"></div>
      </div>
      <div class="head">
        <div class="eye left">
          <div class="pupil left"></div>
        </div>
        <div class="eye right">
          <div class="pupil right"></div>
        </div>
        <div class="nose"></div>
        <div class="moustache"></div>
        <div class="whisker left1"></div>
        <div class="whisker left2"></div>
        <div class="whisker left3"></div>
        <div class="whisker right1"></div>
        <div class="whisker right2"></div>
        <div class="whisker right3"></div>
        <div class="mouth">
          <div class="tongue left"></div>
          <div class="tongue right"></div>
        </div>
        <div class="cheek"></div>
      </div>
      <div class="choker"></div>
      <div class="bell">
        <div class="band top"></div>
        <div class="band bottom"></div>
        <div class="circle"></div>
        <div class="rect"></div>
      </div>
      <div class="arm left"></div>
      <div class="hand left"></div>
      <div class="arm right"></div>
      <div class="hand right"></div>
      <div class="leg left"></div>
      <div class="leg right"></div>
      <div class="body">
        <div class="body-white">
          <div class="pocket"></div>
        </div>
      </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>